<template>
	<div>
		<!--搜索条件-->
		<div style="border-bottom: 1px solid #EEEEEE; padding-bottom:10px;">
			<el-form :model="filterData" ref="filterForm" size="mini">
				<el-row :gutter="20">
					<el-col style="width: 200px;">
						<el-input v-model="filterData.username" placeholder="客户姓名" clearable></el-input>
					</el-col>
					<el-col style="width: 200px;">
						<el-input v-model="filterData.mobile" placeholder="联系电话" clearable></el-input>
					</el-col>
					<el-col style="width: 200px;">
						<el-input v-model="filterData.company" placeholder="单位名称" clearable></el-input>
					</el-col>
					<el-col style="width: 200px;">
						<el-input v-model="filterData.address" placeholder="联系地址" clearable></el-input>
					</el-col>
					<el-col style="width: 200px;">
						<el-input v-model="filterData.supname" placeholder="供应商" clearable></el-input>
					</el-col>
					<el-col style="width: 200px;">
						<el-input v-model="filterData.memo" placeholder="备注信息" clearable></el-input>
					</el-col>
					<el-col style="width:80px;">
						<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div style="margin-top: 5px;">
			<div>
				<el-button size="mini" icon="el-icon-plus" type="primary" @click="handleCreate">新增收货地址</el-button>
			</div>
			<div style="margin-top: 5px;" class="table-wraper">
				<el-table :data="tableData" border  height="100%"	:header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}" >
					<el-table-column label="序号" type="index" width="60px" align="center"></el-table-column>
          <el-table-column label="姓名" prop="username" width="120px"></el-table-column>
          <el-table-column label="区域" prop="region_ids" show-overflow-tooltip width="180px">
          	<template v-slot="scope">
          		{{scope.row.region_values.join(" ")}}
          	</template>
          </el-table-column>
          <el-table-column label="联系电话" prop="mobile"  show-overflow-tooltip width="120px"></el-table-column>
					<el-table-column label="详细地址" prop="address"  show-overflow-tooltip> </el-table-column>
          <el-table-column label="单位" prop="company"  show-overflow-tooltip width="280px"></el-table-column>
					<el-table-column label="备注" prop="memo" show-overflow-tooltip width="200px"></el-table-column>
          <el-table-column label="合作商名称" prop="supname"  show-overflow-tooltip width="180px"></el-table-column>
          <el-table-column label="操作" width="120px" align="center">
						<template v-slot="scope">
							<el-button-group>

								<el-button type="success" size="mini" icon="el-icon-edit-outline" circle @click="handleEdit(scope.$index,scope.row)"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"></el-button>
							</el-button-group>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<CreateUI v-if="createVisible" ref="createUI" @closeHandler="handleCreateCallback"></CreateUI>
		<EditUI v-if="editVisible" ref="editUI" @closeHandler="hanelEditCallback"></EditUI>

		<div style="margin-top: 10px; text-align: right;">
			<el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
				layout=" prev, pager, next,sizes,total" :page-sizes="[50, 100, 150]" :total="total" :page-size="pagesize"
				:current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</div>
	</div>
</template>
c
<script>
	import CreateUI from './create.vue';
	import EditUI from './Edit.vue';
	export default {
		components: {
			CreateUI,
			EditUI
		},
		data() {
			return {
				//分页相关
				curpage: 1,
				pagesize: 50,
				total: 1,
				filterData: {
					username: '',
					mobile: '',
					address: '',
					company: '',
					supname: '',
					memo: ''
				},
				tableData: [],
				createVisible: false,
				editVisible:false,
			}
		},
		mounted() {
			this.handleSearch();
		},
		methods: {
			handleSizeChange: function(val) {
				this.pagesize = val;
				this.curpage = 1;
				this.loadTableData();
			},
			handleCurrentChange: function(val) {
				this.curpage = parseInt(val);
				this.loadTableData();
			},
			handleCreate() {
				this.createVisible = true;
				this.$nextTick(() => {
					this.$refs.createUI.dialogVisible = true;
					this.$refs.createUI.init();
				})
			},
			handleCreateCallback(){
				this.loadTableData();
			},
			handleSearch() {
				this.curpage = 1;
				this.loadTableData();
			},
			loadTableData() {

				const params = {
					curpage: this.curpage,
					pagesize: this.pagesize,
					username: this.filterData.username,
					mobile: this.filterData.mobile,
					company: this.filterData.company,
					address:this.filterData.address,
					supname: this.filterData.supname,
					memo: this.filterData.memo
				}
				this.axios.post("api/admin/clientuser/list", params).then(res => {
					if (res.status == 200 && res.data.code == 0) {
						this.tableData = res.data.list;
						this.curpage = res.data.curpage;
						this.total = res.data.total;
					}
				})
			},
			handleEdit(index,row){
				this.editVisible = true;
				this.$nextTick(() => {
					this.$refs.editUI.dialogVisible = true;
					this.$refs.editUI.init(index,JSON.parse(JSON.stringify(row)));
				})
			},
			hanelEditCallback(index,data){
				this.tableData[index].username=data.username;
				this.tableData[index].mobile=data.mobile;
				this.tableData[index].address=data.address;
				this.tableData[index].region_ids=data.region_ids;
				this.tableData[index].region_values=data.region_values;
				this.tableData[index].company=data.company;
				this.tableData[index].supid=data.supid;
				this.tableData[index].supname=data.supname;
				this.tableData[index].memo=data.memo;
			},
			handleDelete(index,row){
				let confirmText = ["姓名: " + row.username, "联系电话:" + row.mobile, "详细地址: " + row	.address];
				const newDatas = [];
				const h = this.$createElement;
				for (const i in confirmText) {
					newDatas.push(h('p', null, confirmText[i]));
				}
				this.$confirm('标题',"确定要删除以下联系人吗？",{
					message: h('div', null, newDatas),
					confirmButtonText: "删除",
					cancelButtonText: "取消",
					type: 'error'
				}).then(() => {
					this.axios.post("api/admin/clientuser/remove",{id:row.id}).then(res=>{
            this.$message.success(res.data.msg);
             if(res.status==200 && res.data.code==0){
               this.loadTableData();
             }
					})
				});
			}
		}
	}
</script>

<style scoped>
  .table-wraper{
      height: calc(100vh - 220px);
  }
</style>
